<template>
    <!-- <d-row :justify="'center'">
        <d-col>
        </d-col>
    </d-row> -->
    <d-row type="flex" class="docs-devui-row">
        <d-col flex="250px" :xs="0" :sm="0" :md="1" class="side">
            <Side></Side>
        </d-col>
        <d-col flex="auto">
            <d-content class="content__doc">
                <nav-menu :menu-routes="docTree"></nav-menu>
                <div class="content__doc__docs-wrapper">
                    <router-view></router-view>
                </div>
                <h2>本文贡献者</h2>
                <ul>
                    <li v-for="author in authors">
                        <a :href="author.email">{{author.name}}</a>
                    </li>
                </ul>
            </d-content>
        </d-col>
    </d-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import type {Ref} from 'vue';
import Side from './side.vue';
import NavMenu from './navMenu.vue';
import { useRoute, useRouter } from 'vue-router';
import { useDocRouterTree } from '@/router/generateDocRouter';
interface authors {
    name: string;
    email: string;
}
const router = useRouter()
const routes = useRoute();
const docTree = useDocRouterTree().children;
const normalizeAuthorObject = (_authors: string[]) => {
    return _authors.map((author:string) => {
        const splitArray = author.split(' ');
        const authorName = splitArray[0];
        const authorEmail = splitArray[1].replace('<', '').replace('>', '');
        return {
            name: authorName,
            email: `mailto:${authorEmail}`
        }
    });
}

let rawAuthors = routes.meta.author as string[];
const authors:Ref<authors[]> = ref([...normalizeAuthorObject(rawAuthors || [])]);
router.beforeEach((to)=>{
    rawAuthors = (to.meta.author || []) as string[];
    authors.value = normalizeAuthorObject(rawAuthors);
})
</script>


